/**
 * @class Ext.dataview.List
 */
.x-list1{
  @include background(linear-gradient(left, color-stops(#fbfbfb, #f6f6f6)));
}




.x-list {
    //background: #ecf2f9;
  @include background(linear-gradient(left, color-stops(#ebebeb, #f6f6f6)));
    //background-color: $list-bg-color;

    .x-list-disclosure {
        position: relative;
        overflow: visible;
        border: 0;
        background: url('../images/list_go.png') no-repeat;
        width: 30px;
        //@include border-radius($list-disclosure-size);
        //@include background-gradient(saturate($active-color, 10%));
        //width: $list-disclosure-size;
        //height: $list-disclosure-size;
        margin: 10px 7px 0 0;

        &:before {
            @include absolute-position(0, 0, 0, 0);
            //content: ']';
            //font-family: 'Pictos';
            //color: #fff;
            //font-size: 0px;
            //text-align: center;
            //line-height: 35px;
            //text-shadow: 0 0 0;
        }
    }

    &.x-list-indexed .x-list-disclosure {
        margin-right: 1.8em;
    }

    .x-item-selected .x-list-disclosure {
        //background: #fff none;

        &:before {
            //color: $active-color;
        }
    }

    .x-list-item {
        //color: $list-color;
        color:#838383;

        &.x-item-pressed {
            &.x-list-item-tpl,
            .x-dock-horizontal {
                background: $list-pressed-color none;
            }
        }

        &.x-item-selected .x-dock-horizontal,
        &.x-item-selected.x-list-item-tpl {
          background: #41a6d5;
          border-top:1px solid #000;
          box-shadow: 0px 4xp 4px #000;
          -webkit-box-shadow:0px 4xp 4px #000;

            //@include background-gradient($list-active-color, $list-active-gradient);
            @include color-by-background($list-active-color);
        }

        .x-list-item-body,
        &.x-list-item-tpl .x-innerhtml {
            padding: 12px 30px;
        }
    }
}

.x-list-normal {
    .x-list-header {
        @include background-gradient($list-header-bg-color, $list-header-gradient);
        @include color-by-background($list-header-bg-color, 30%);
        @include bevel-by-background($list-header-bg-color);
        border-top: 1px solid $list-header-bg-color;
        border-bottom: 1px solid darken($list-header-bg-color, 20%);
        font-weight: bold;
        font-size: 0.8em;
        padding: 0.2em 1.02em;
    }

    @if $list-zebrastripe {
        .x-list-item {
            &.x-list-item-tpl,
            .x-dock-horizontal {
                border-top: 1px solid transparent;
            }

            &.x-list-item-tpl:nth-child(even),
            &:nth-child(even) .x-dock-horizontal {
                background-color: darken($list-bg-color, 5%);
            }

            &.x-list-item-tpl.x-list-footer-wrap:nth-child(odd),
            &.x-list-footer-wrap:nth-child(odd) .x-dock-horizontal {
                border-bottom: 1px solid darken($list-bg-color, 5%);
            }
        }
    } @else {
        .x-list-item {
            &.x-list-item-tpl,
            .x-dock-horizontal {
                //border-top: 1px solid darken($list-bg-color, 10%);
              //border-top:1px solid #fff;
              border-bottom: 1px solid #d2d2d2;
              box-shadow: 0px 1px 1px #fff;
            }


            &.x-list-item-tpl.x-list-footer-wrap,
            &.x-list-footer-wrap .x-dock-horizontal {
                border-bottom: 1px solid darken($list-bg-color, 10%);
            }
        }
    }

    .x-list-item {
        @if $include-list-highlights {
            &.x-item-pressed.x-list-item-tpl,
            &.x-item-pressed .x-dock-horizontal {
                border-top-color: $list-pressed-color;
                background-color: $list-pressed-color;
            }


            &.x-item-selected.x-list-item-tpl,
            &.x-item-selected .x-dock-horizontal {
                border-top-color: $list-active-color;
            }
        }
    }
}
.x-list2 {
  background: #f7fafe;
  //margin:40px;
  //border: 1px solid #c0c0c0;
  .x-list-disclosure {
    position: relative;
    overflow: visible;
    border: 0;
    background: url('../images/list_go.png') no-repeat;
    width: 30px;
    margin: 30px 7px 0 0;

    &:before {
      @include absolute-position(0, 0, 0, 0);
    }
  }

  &.x-list-indexed .x-list-disclosure {
    margin-right: 1.8em;
  }

  .x-item-selected .x-list-disclosure {
    //background: #fff none;

    &:before {
      //color: $active-color;
    }
  }

  .x-list-item {
    //color: $list-color;
    color:#838383;

    &.x-item-pressed {
      &.x-list-item-tpl,
      .x-dock-horizontal {
        background: $list-pressed-color none;
      }
    }

    &.x-item-selected .x-dock-horizontal,
    &.x-item-selected.x-list-item-tpl {
      background: #41a6d5;
      border-top:1px solid #000;
      box-shadow: 0px 4xp 4px #000;
      -webkit-box-shadow:0px 4xp 4px #000;

      //@include background-gradient($list-active-color, $list-active-gradient);
      @include color-by-background($list-active-color);
    }

    .x-list-item-body,
    &.x-list-item-tpl .x-innerhtml {
      padding: 12px 26px;
    }
  }

}


.x-list3 {
  background: #f7fafe;
  //margin:40px;
  //border: 1px solid #c0c0c0;
  .x-list-disclosure {
    position: relative;
    overflow: visible;
    border: 0;
    background: url('../images/list_go.png') no-repeat;
    width: 30px;
    margin: 30px 7px 0 0;

    &:before {
      @include absolute-position(0, 0, 0, 0);
    }
  }

  &.x-list-indexed .x-list-disclosure {
    margin-right: 1.8em;
  }

  .x-item-selected .x-list-disclosure {
    //background: #fff none;

    &:before {
      //color: $active-color;
    }
  }

  .x-list-item {
    //color: $list-color;
    color:#838383;

    &.x-item-pressed {
      &.x-list-item-tpl,
      .x-dock-horizontal {
        background: $list-pressed-color none;
      }
    }

    &.x-item-selected .x-dock-horizontal,
    &.x-item-selected.x-list-item-tpl {
      background: #41a6d5;
      border-top:1px solid #000;
      box-shadow: 0px 4xp 4px #000;
      -webkit-box-shadow:0px 4xp 4px #000;

      //@include background-gradient($list-active-color, $list-active-gradient);
      @include color-by-background($list-active-color);
    }

    .x-list-item-body,
    &.x-list-item-tpl .x-innerhtml {
      padding:0px;
    }
  }

}

.x-list-round {
    .x-scroll-view {
        background-color: #eee;
    }

    .x-list-header-swap {
        padding-right: $list-round-padding;
    }

    .x-list-inner .x-scroll-container {
        top: $list-round-padding;
        left: $list-round-padding;
        bottom: $list-round-padding;
        right: $list-round-padding;
        width: auto !important;
        height: auto !important;
    }

    .x-list-header {
        color: #777;
        font-size: 1em;
        font-weight: bold;
        padding-left: 26px;
        line-height: 1.7em;
        @include background-image(linear-gradient(top, rgba(238, 238, 238, 1), rgba(238, 238, 238, .9) 30%, rgba(238, 238, 238, .4)));
    }

    .x-list-container {
        padding: $list-round-padding $list-round-padding 0 $list-round-padding;

        .x-list-header {
            padding-left: $list-round-padding;
            background-image: none;
        }
    }

    &.x-list-ungrouped,
    &.x-list-grouped {
        .x-list-item-tpl,
        .x-list-item .x-dock-horizontal {
            border: 1px solid darken($list-bg-color, 10%);
            border-width: 1px 1px 0 1px;
            background: $list-bg-color;
        }
    }

    &.x-list-ungrouped {
        .x-list-item {
            &:first-child {
                @if $include-border-radius {
                    @include border-top-radius($list-rounded-radius);
                }
            }

            &:last-child {
                @if $include-border-radius {
                    @include border-bottom-radius($list-rounded-radius);
                }
                border-width: 1px;
                margin-bottom: $list-round-padding;
            }
        }
    }

    &.x-list-grouped {
        .x-list-header-wrap {
            .x-dock-horizontal {
                @if $include-border-radius {
                    @include border-top-radius($list-rounded-radius);
                }
            }
        }

        .x-list-header-wrap.x-list-header {
            border: 1px solid darken($list-bg-color, 10%);
            border-width: 1px 1px 0 1px;
            @if $include-border-radius {
                @include border-top-radius($list-rounded-radius);
            }
        }

        .x-list-footer-wrap {
            background: transparent;

            &.x-list-item-tpl,
            .x-dock-horizontal {
                border: none;
                background: transparent;
                padding-bottom: $list-round-padding;
                margin-bottom: $list-round-padding;

                > .x-innerhtml,
                > .x-dock-body {
                    border: 1px solid darken($list-bg-color, 10%);
                    background: $list-bg-color;
                    @if $include-border-radius {
                        @include border-bottom-radius($list-rounded-radius);
                    }
                }
            }
        }
    }

    .x-indexbar-vertical {
        margin-right: 20px;
    }
}
